<template>
  <div class="todosContainer" :style="{height:containerHeight()}">
    <div style="left:15px;position: absolute;top: 10px;" v-if="listIndex < lists.length && listIndex > 0">
      <a href="javascript:void(0)" style="color: #9e9e9e;font-size: 14px" @click="prev">
        <Icon type="arrow-left-b"></Icon>
        <!--上一页-->
      </a>
    </div>
    <div class="nextIcon" style="position: absolute;right:15px;top: 10px;" v-if="listIndex !== lists.length - 1">
      <a href="javascript:void(0)" style="color: #9e9e9e;font-size: 14px" @click="next">
        <!--下一页-->
        <Icon type="arrow-right-b"></Icon>
      </a>
    </div>
    <div :class='active === i.i?activeClass:""' class="todoCard" :id='i.idName' v-for="i in currentLists"
         :key=i.i
         @click="clickItem(i)"
         :style="{top:calcTop(i),opacity:1-(i.i-1)*0.1,zIndex:20-i.i,width:(100-(i.i - 1)*6)+'%'}">
      <div style="padding: 10px 10px;">
        <h6 style="text-align: left;padding-bottom: 10px;color:white">{{i.date}}
          <a href="javascript:void(0)" @click="deleteTodo(i.id)" style="color: white;">
            <Icon style="float: right;color: white" type="md-close"></Icon>
          </a>
        </h6>
        <hr style="padding: 10px 0 10px 0">
        <p class="text">{{i.note}}</p>
        <!--<Input v-model="i.note" type="textarea" :rows="4" v-if="currentLog.id === i.id" @on-enter="saveNote"></Input>-->
      </div>
    </div>
  </div>
</template>

<script>
  import util from "util"

  export default {
    props: {
      data: Array
    },
    data() {
      return {
        currentLog: {},
        show: true,
        activeClass: this.active === 1 ? 'frontItem' : '',
        fontItemClass: '',
        active: 1,
        lists: [],
        currentLists: [],
        listIndex: 0
      }
    },
    watch: {
      data() {
        this.lists = util.sliceSomeSizeArray(this.data, 4);
        this.currentLists = this.lists[0];
        this.listIndex = 0
      }
    },
    methods: {
      // 编辑日志
      editNote(i) {
        this.currentLog = i
      },
      // 保存日志
      saveNote(){
        console.log(this.currentLog.note);
        this.currentLog = {}
      },
      containerHeight() {
        let h = null;
        if (!this.currentLists) {
          return false
        } else if (this.currentLists.length > 2) {
          h = '260px'
        } else if (this.currentLists.length === 2) {
          h = '230px'
        }
        return h
      },
      calcTop(i) {
        if (this.currentLists.length > 2) {
          if (i.i > 1) {
            return (-185 * (i.i - 1)) + 100 + 'px'
          } else {
            return '100px'
          }
        } else if (this.currentLists.length === 2) {
          if (i.i > 1) {
            return (-185 * (i.i - 1)) + 70 + 'px'
          } else {
            return '70px'
          }
        } else if (this.currentLists.length === 1) {
          return '0px'
        }
      },
      clickItem(i) {
        if (i.i > 1) {
          this.active = i.i;
          this.activeClass = 'activeItemTodo';
          let todos = this.currentLists;
          todos.splice(i.i - 1, 1);
          let Todos = [i].concat(todos);
          for (let s = 0; s < Todos.length; s++) {
            Todos[s].i = s + 1;
            Todos[0].idName = 'frontItem'
          }
          this.currentLists = Todos;
          setTimeout(() => {
            this.activeClass = '';
            this.currentLists[0].idName = ''
          }, 1100)
        }
      },
      deleteTodo(id) {
        $.get('../api/note/deleteNote/' + id, {}, (data) => {
          if (data.code === 400) {
            this.$Notice.warning({
              title: data.data
            })
          } else {
            if (this.data.length % 4 === 1) {
              this.listIndex = this.listIndex - 1;
            }
            this.$emit('getTodos');
          }
        }, 'json')
      },
      prev() {
        this.listIndex = this.listIndex - 1;
        let list = [];
        let len = this.lists[this.listIndex].length;
        for (let i = 0; i < len; i++) {
          list.push({
            note: this.lists[this.listIndex][i].note,
            date: this.lists[this.listIndex][i].date,
            idName: '',
            id: this.lists[this.listIndex][i].id,
            i: i + 1
          })
        }
        this.currentLists = list;
      },
      next() {
        this.listIndex = this.listIndex + 1;
        let list = [];
        let len = this.lists[this.listIndex].length;
        for (let i = 0; i < len; i++) {
          list.push({
            note: this.lists[this.listIndex][i].note,
            date: this.lists[this.listIndex][i].date,
            idName: '',
            id: this.lists[this.listIndex][i].id,
            i: i + 1
          })
        }
        this.currentLists = list;
      }
    },
    mounted() {
      this.lists = this.data;
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .todosContainer {
    position: relative;
    width: 100%;
    margin: auto;
  }

  .todoCard {
    position: relative;
    width: 100%;
    height: 160px;
    margin: 0 auto;
    background-color: #ec726fa6;
    border-radius: 5px !important;
  }

  .text {
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    zoom: 1;
    color: white
  }

  @media screen and (max-width: 1440px) {
    .text {
      zoom: 0.7
    }
  }

  .activeItemTodo {
    animation: transformRight 0.5s ease;
  }

  #frontItem {
    animation: transformLeft 0.5s ease;
  }

  @keyframes transformRight {
    0% {
      left: 0px;
      opacity: 0.8
    }
    50% {
      left: 20px;
      opacity: 0.4
    }
    100% {
      left: 40px;
      opacity: 0
    }
  }

  @keyframes transformLeft {
    0% {
      left: 0px;
      opacity: 0.8
    }
    50% {
      left: -20px;
      opacity: 0.4
    }
    100% {
      left: -40px;
      opacity: 0
    }
  }

  .nextIcon:after {
    clear: both;
  }
</style>
